<template>
  <div class="mapdetail">
    <titletop :titlename="titlename"></titletop>
    <!--地图容器-->
    <div id="XSDFXPage" class="XSDFXPage"></div>
    <!--地图覆盖物样式-->
    <div class="fixedfull">
      <div class="myposition" @click="gomyposition()"></div>
      <div class="addmapsize" @click="addmapsize()">➕</div>
      <div class="minusmapsize" @click="minusmapsize()">➖</div>
      <div class="shopdetail" v-show="mapInfo.showdetail">
        <div v-text="mapInfo.shopname"></div>
        <div v-text="mapInfo.shopaddress"></div>
        <div ></div>
      </div>
    </div>
  </div> 
</template>
<script>
    import titletop from 'components/title' 
    export default {
        name:'mapdetail',
        data () {
            return {
              titlename:'地图',
              map:'',
              mapInfo:{
                city:'北京',
                longitude:116.331398,//我的初始经度
                latitude:39.897445, //我的初始纬度
                druglng:'',//地图经度
                druglat:'',//地图纬度
                zoom:12,
                showdetail:false,
                shopname:'',
                shopaddress:''
              }
            }
        },
        components: {
            titletop
        },
        methods : {
          gomyposition(){
              var point = new BMap.Point(this.mapInfo.longitude,this.mapInfo.latitude);
              this.map.panTo(point);
          },
          addmapsize(){
            this.map.setZoom(this.map.getZoom() + 1);
          },
          minusmapsize(){
            this.map.setZoom(this.map.getZoom() - 1);
          }
        },
        mounted() {
            console.log(this.$route.query)
            if(this.$route.query){
              this.mapInfo.shopname = this.$route.query.title;
              this.mapInfo.shopaddress = this.$route.query.address;
            }

            var _this = this;
            // 百度地图API功能
            // 创建Map实例
            _this.map = new BMap.Map("XSDFXPage");
            var point = new BMap.Point(this.mapInfo.longitude,this.mapInfo.latitude);
            _this.map.centerAndZoom(point,this.mapInfo.zoom);

            //获取当前位置
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
              if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                _this.map.addOverlay(mk);
                _this.mapInfo.longitude = r.point.lng;
                _this.mapInfo.latitude = r.point.lat;
              }
              else {
                _this.$toast({
                  message: 'failed'+this.getStatus(),
                  position: 'bottom',
                  duration: appConfigs.toastime
                });
              }        
            },{enableHighAccuracy: true});

            //创建药店的标注
            this.mapInfo.druglng = 116.500244;
            this.mapInfo.druglat = 39.81556;
            var point = new BMap.Point(this.mapInfo.druglng,this.mapInfo.druglat);
            _this.map.centerAndZoom(point, this.mapInfo.zoom);
            var marker = new BMap.Marker(point);  // 创建标注
            _this.map.addOverlay(marker);           // 将标注添加到地图中
            _this.map.panTo(marker.point);
            marker.addEventListener("click",function(){
              var p = this.getPosition();       //获取marker的位置
              _this.mapInfo.showdetail = true;
            });
        }
    }
</script>
<style scoped lang="scss">
  $gray:#eeeeee;
  $iconw:2rem;
  $iconh:2rem;

  .XSDFXPage{
      width: 100%;
      height: 100%;
      height: 100vh;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
  }
  .fixedfull{
    div{
      position: absolute;
    }
    .myposition{
      background-color:red;
      width: $iconw;
      height:$iconh;
      bottom: 2rem;
      left: 5px;
    }
    .addmapsize{
      width: $iconw;
      height:$iconh;
      right:5px;
      bottom:$iconh;
    }
    .minusmapsize{
      width: $iconw;
      height:$iconh;
      right:5px;
      bottom:5px;
    }
    .shopdetail{
      background-color: #ffffff;
      width: 80%;
      height: 8rem;
      bottom: 1rem;
      left: 10%;
      div:nth-child(1){
        top: 1rem;
        left:1rem;
      }
      div:nth-child(2){
        top: 3rem;
        left:1rem;
      }
      div:nth-child(3){
        top: 6rem;
        background-color: $gray;
        height: 1px;
        width: 100%;
      }
    }
  }
</style>